
import * as echarts from 'echarts';
// import bgImage from '@/assets/tms-today-little.png';
//应用启动总量-左上
export function getOptionsForAppAllPie(data) {
  let colorList = [
    "#329BFF",
    "#48DCF3",
    "#FFD042",
    "#F3488C",
    "#5F48F3",
    "#F39348", "#A048F3", "#48F3C1", "#F34848", "#48F381"];
  function generateRandomColorList(count) {
    const colorList = [];
    for (let i = 0; i < count; i++) {
      const r = Math.floor(Math.random() * 256);
      const g = Math.floor(Math.random() * 256);
      const b = Math.floor(Math.random() * 256);
      colorList.push(`rgb(${r},${g},${b})`);
    }
    return colorList;
  }
  // 超出制定颜色多余生成随机颜色
  if (data.length > 10) colorList = colorList.concat(generateRandomColorList(data.length - 10))
  const option = {
    title: {
      text: '',
      x: 'center',
      y: '25%',
      textStyle: { // 主标题样式
        fontSize: '20',
        color: '#fff',
        fontweight: 'bold'
      },
    },
    tooltip: {
      backgroundColor: "rgba(0,0,0,0)",
      borderColor: "rgba(0,0,0,0)",
      triggerOn: "mousemove",
      enterable: true,
      shadowBlur: 0,
      shadowColor: 'rgba(0, 0, 0, 0)',
      padding: [0],
      trigger: "item",
      textStyle: {
        color: '#fff', // 文本颜色
        fontSize: 24, // 文本大小
        fontWeight: 500,
      },
      position: function (point, params, dom, rect, size) {
        // 提示框位置
        let x, y
        // 当前鼠标位置
        const pointX = point[0]
        const pointY = point[1]
        // 提示框尺寸
        const boxWidth = size.contentSize[0]
        const boxHeight = size.contentSize[1]
        // 容器尺寸
        const viewWidth = size.viewSize[0]
        // const viewHeight = size.viewSize[1]
        // 设置光标左右位置
        if (viewWidth - boxWidth < pointX) {
          // 光标位置 大于 容器减去提示框的位置，右边放不下，放在左侧
          x = pointX - boxWidth
        } else {
          // 默认紧贴光标右侧显示
          x = pointX + 50
        }
        // 设置光标上下位置
        if (boxHeight < pointY) {
          // 光标位置 小于 提示框位置，上面放不下，放在下侧
          y = pointY - boxHeight
        } else {
          // 默认紧贴光标上侧显示
          y = pointY
        }
        return [x, y]
      },
      formatter: "<span style='font-size:16px;'>{b}</span> <br/><span style='display:inline-blank;position:relative;top:-10px;'>{d}%</span>",
    },
    legend: {
      icon: 'rect',
      orient: 'horizontal', // 横向显示图例
      pageIconColor: '#ff781f', // 设置翻页箭头颜色
      pageTextStyle: {
        color: '#fff' // 设置翻页数字颜色
      },
      pageIconSize: 11, // 设置翻页箭头大小
      textStyle: { // 设置图例文字的样式
        color: '#fff',
        fontSize: 13
      },
      itemHeight: 10, // 设置图例项的高度
      itemWidth: 15, // 设置图例项的宽度
      left: "15%",
      right: "10%",
      top: "63%",
      width: 500,
      height: '70%', // 设置图例高度
      overflow: 'break',
      itemGap: 20,
      formatter: function (name) {
        // let percent = 0;
        // let total = 0;
        // for (let i = 0; i < props.data.length; i++) {
        //     total += props.data[i].value;
        // }
        // const item = props.data.filter((item) => item.name === name)[0];
        // percent = (
        //     (item.value / total) *
        //     100
        // ).toFixed(1);
        //  return `${name}：${percent}%`;
        return `${name}`;
      }
    },
    series: [
      {
        type: "pie",
        center: ["49%", "33%"], // 饼图位置
        radius: ["39%", "53%"],
        avoidLabelOverlap: false,
        // roseType:'radius',
        label: {
          show: true,
          position: "outside",
          formatter: '{b} {d}%', // 显示名称
          textStyle: {
            color: '#fff' // 标签文字颜色
          }
        },
        emphasis: {
          label: {
            show: false,
            fontSize: 10,
            fontWeight: 'bold'
          }
        },
        itemStyle: {
          normal: {
            color: function (params) {
              return colorList[params.dataIndex];
            }
          }
        },
        labelLine: {
          show: true, // 显示折线
          length: 10, // 折线长度
          length2: 30 // 折线第二段长度
        },
        data: data
      }
    ]
  };
  return option
}

//横向柱图-活跃排名
export function getOptionsForRankBar(yLabel, yData, ledEndName) {
  // let bgData = [];
  var option = {
    grid: {
      left: '2%',
      right: '10%',
      bottom: '5%',
      top: '10%',
      containLabel: true,
    },
    legend: {//图例组件，颜色和名字
      icon: 'rect',
      right: 10,
      top: 15,
      itemGap: 16,
      itemWidth: 18,
      itemHeight: 10,
      textStyle: {
        color: '#fff',
        opacity: '0.6',
        fontStyle: 'normal',
        fontFamily: '微软雅黑',
        fontSize: 12,
      }
    },
    tooltip: {
      show: false,
      trigger: "item",
      backgroundColor: "rgba(0,0,0,0)",
      borderColor: "rgba(0,0,0,0)",
      triggerOn: "mousemove",
      enterable: true,
      shadowBlur: 0,
      shadowColor: 'rgba(0, 0, 0, 0)',
      padding: [0],
      textStyle: {
        color: '#fff', // 文本颜色
        fontSize: 24, // 文本大小
        fontWeight: 500,
      },
      formatter: "<span style='font-size:16px;'>{c}次</span>",
    },
    // backgroundColor: '#031d33',
    xAxis: {
      show: true,
      type: 'value',
      // data: xData,
      splitNumber: 7,
      axisLabel: {
        //坐标轴刻度标签的相关设置。
        interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
        //	margin:15,
        textStyle: {
          color: '#fff',
          fontStyle: 'normal',
          fontSize: 15,
          // fontWeight: 'bolder'
        },
        formatter: function (value) {
          if (value >= 10000) {
            return (value / 10000).toFixed(1).replace(/(\.0+$)/, "") + 'w';
          } else {
            return value.toLocaleString()
          }
        }
      },
      axisLine: {
        show: true, // X轴 网格线 颜色类型的修改
        lineStyle: {
          type: 'solid',
          opacity: '0.15',
          color: 'rgba(255,255,255,1)'
        },
      },
      splitLine: {
        show: true, // X轴线 颜色类型的修改
        lineStyle: {
          type: 'solid',
          color: 'rgba(77, 128, 254, 0.2)',
        },
      },
    },
    yAxis: [
      {
        type: 'category',
        inverse: true,
        axisLabel: {
          show: true,
          margin: 25,
          textStyle: {
            color: '#fff',
            fontSize: '16',
            fontWeight: 'bolder',
          },
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: true, // Y轴 网格线 颜色类型的修改
          lineStyle: {
            type: 'solid',
            opacity: '0.15',
            color: 'rgba(255,255,255,1)'
          },
        },
        data: yLabel,
      },
      //  {
      //     type: 'category',
      //     inverse: true,
      //     axisTick: 'none',
      //     axisLine: 'none',
      //     show: true,
      //     axisLabel: {
      //         textStyle: {
      //             color: 'rgba(128, 207, 240, 1)',
      //             fontSize: '16',
      //         },
      //         formatter: function (value) {
      //             return '均:' + value + '岁';
      //         },
      //     },
      //     data: yRtData,
      // },
    ],
    series: [
      {
        name: ledEndName,
        type: 'bar',
        zlevel: 1,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              {
                offset: 1,
                color: '#48DCF3',
              },
              {
                offset: 0,
                color: '#276CC9',
              },
            ]),
            // shadowBlur: 0,
            // shadowColor: 'rgba(87,220,222,0.7)',
          },
        },
        barWidth: 20,
        data: yData,
        label: {// 右侧label数字
          normal: {
            show: true,
            position: 'right',
            formatter: function (params) { return params.value.toLocaleString() },
            color: '#fff',
            fontSize: '16px'
          }
        },
      },
      // {
      //     name: '背景',
      //     type: 'bar',
      //     barWidth: 20,
      //     barGap: '-100%',
      //     data: bgData,
      //     itemStyle: {
      //         normal: {
      //             color: 'rgba(0, 151, 251, 0.2)',
      //         },
      //     },
      // },
    ],
  }
  return option;

}

//多柱图--应用活跃情况一览
export function getOptionsForActiveBar(barOpton) {
  var option = option = {
    legend: {//图例组件，颜色和名字
      right: 10,
      top: 15,
      itemGap: 40,
      itemWidth: 18,
      itemHeight: 10,
      textStyle: {
        color: '#fff',
        opacity: '0.6',
        fontStyle: 'normal',
        fontFamily: '微软雅黑',
        fontSize: 12,
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
      backgroundColor: "rgba(0,0,0,0)",
      borderColor: "rgba(0,0,0,0)",
      triggerOn: "mousemove",
      enterable: true,
      shadowBlur: 0,
      shadowColor: 'rgba(0, 0, 0, 0)',
      padding: [0],
      textStyle: {
        color: '#fff', // 文本颜色
        fontSize: 24, // 文本大小
        fontWeight: 500,
      },
      borderWidth: 1,
      position: function (point, params, dom, rect, size) {
        // 提示框位置
        let x, y
        // 当前鼠标位置
        const pointX = point[0] + 50
        const pointY = point[1]
        // 提示框尺寸
        const boxWidth = size.contentSize[0]
        const boxHeight = size.contentSize[1]
        // 容器尺寸
        const viewWidth = size.viewSize[0]
        // const viewHeight = size.viewSize[1]
        // 设置光标左右位置
        if ((viewWidth - boxWidth) - 50 < pointX) {
          // 光标位置 大于 容器减去提示框的位置，右边放不下，放在左侧
          x = pointX
          //使用以下代码，提示框左侧显示，注释掉这句，让提示框紧贴光标右侧显示
          //x = pointX-boxWidth-100 // 注释掉这句，让提示框紧贴光标右侧显示
          // const tipElement = document.querySelector('.puple-common-tip-left');
          // if (tipElement) {
          //   // 设置背景图
          //   tipElement.style.setProperty('background', `url(${bgImage}) no-repeat center`, 'important');
          //   // 设置 background-size 并支持 !important
          //   tipElement.style.cssText += 'background-size: 100% 100% !important;';
          // }
        } else {
          // 默认紧贴光标右侧显示
          x = pointX
        }
        // 设置光标上下位置
        if (boxHeight < pointY) {
          // 光标位置 小于 提示框位置，上面放不下，放在下侧
          y = pointY - boxHeight
        } else {
          y = pointY
        }
        return [x, y]
      },
      // formatter: ' {b}    户',
      formatter: (param) => {
        if (!Array.isArray(param) || param.length === 0) {
          return '<div class="puple-common-tip-left">No valid data available</div>';
        }
        const axisValueLabel = param[0]?.axisValueLabel || '';
        // 限定处理前三个元素 
        const validItems = param.slice(0, 3).map(item => {
          if (!item || typeof item.value !== 'number') return null;
          return {
            name: item.seriesName || '',
            value: item.value.toLocaleString()
          };
        }).filter(Boolean); // 过滤空值 
        const innerHTML = validItems.map(item =>
          `<div class="inner-text-item">
                <span class="name">${item.name} ：</span>${item.value} 
              </div>`
        ).join('');
        return `
              <div class="puple-common-tip-left">
                ${axisValueLabel ? `<div class="name">${axisValueLabel}</div>` : ''}
                ${validItems.length > 0 ? `
                <div class="inner-text">
                    ${innerHTML}
                </div>` : ''}
              </div>`;
      }
    },
    grid: {
      top: '15%',
      right: '5%',
      left: "5%",
      bottom: '12%'
    },
    xAxis: [{
      name: "",
      type: 'category',
      data: barOpton.xData,
      axisLine: {
        lineStyle: {
          color: '#FFFFFF'
        }
      },
      axisLabel: {
        margin: 10,
        textStyle: {
          color: '#fff',
          fontStyle: 'normal',
          fontSize: 15
        },
      },
      axisTick: {
        show: false
      }
    }],
    yAxis: [{
      name: "",
      axisLabel: {
        color: '#fff',
        textStyle: {
          color: '#fff',
          fontStyle: 'normal',
          fontSize: 15
        },
        formatter: function (value) {
          if (value >= 10000) {
            return (value / 10000).toFixed(1).replace(/(\.0+$)/, "") + 'w';
          } else {
            return value.toLocaleString()
          }
        }
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#FFFFFF'
        }
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(255,255,255,0.12)'
        }
      }
    }],
    series: [{
      name: "活跃累积量",
      type: 'bar',
      data: barOpton.y1Data,
      barGap: '60%',
      barWidth: '13%',
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: '#48DCF3' // 0% 处的颜色
          }, {
            offset: 1,
            color: '#276CC9' // 100% 处的颜色
          }], false),
          shadowColor: 'rgba(0,160,221,1)',
          shadowBlur: 4,
        }
      },
      label: {
        //柱上方展示数字
        // normal: {
        //     show: false,
        //     lineHeight: 10,
        //     formatter: '{c}',
        //     position: 'top',
        //     textStyle: {
        //         color: '#00D6F9',
        //         fontSize: 12
        //     }

        // }
      }
    }, {
      name: "30天活跃",
      type: 'bar',
      data: barOpton.y2Data,
      barWidth: '13%',
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: '#6CFFB3' // 0% 处的颜色
          }, {
            offset: 1,
            color: '#22BC7E' // 100% 处的颜色
          }], false),
          shadowColor: 'rgba(0,160,221,1)',
          shadowBlur: 4,
        }
      },
      // label: {
      //     normal: {
      //         show: true,
      //         lineHeight: 10,
      //         formatter: '{c}',
      //         position: 'top',
      //         textStyle: {
      //             color: '#00D6F9',
      //             fontSize: 12
      //         }

      //     }
      // }
    }, {
      name: "7天活跃",
      type: 'bar',
      data: barOpton.y3Data,
      barWidth: '13%',
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: '#FFD042' // 0% 处的颜色
          }, {
            offset: 1,
            color: '#F39348' // 100% 处的颜色
          }], false),
          shadowColor: 'rgba(0,160,221,1)',
          shadowBlur: 4,
        }
      },
      // label: {
      //     normal: {
      //         show: true,
      //         lineHeight: 10,
      //         formatter: '{c}',
      //         position: 'top',
      //         textStyle: {
      //             color: '#00D6F9',
      //             fontSize: 12
      //         }
      //     }
      //   }
    },]
  };
  return option;
}